<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			#box{
				width: 50PX;
				height: 50px;
				background: green;
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
	</head>
	<body onselect="return false">
		<div id="box"></div>
		<script>
			//非面向对象方法
//			var oBox = document.getElementById('box');
//			oBox.onmousedown = function(e){
//				var e = e||window.event;
//				console.log(e)
//				var intX = e.clientX - this.offsetLeft;
//				var intY = e.clientY - this.offsetTop;
//				document.onmousemove = function(e){
//					var e = e||window.event;
//					var moveX = e.clientX;
//					var moveY = e.clientY;
//					oBox.style.left = moveX-intX + "px";
//					oBox.style.top = moveY-intY + "px";
//				}
//				document.onmouseup = function(e){
//					document.onmousemove = null;
//					document.onmousedown = null;
//				}
//			}
			
			
			//面向对象方法
			function Drag(oBox){
				this.oBox = document.getElementById(oBox);
				var _this = this;
				_this.oBox.onmousedown = function(e){
					console.log(11)
					var e = e||window.event;
					_this.ondown(e);
				};
			}	
			Drag.prototype = {
				ondown:function(e){
					var This = this;
					this.intX = e.clientX - this.oBox.offsetLeft;
					this.intY = e.clientY - this.oBox.offsetTop;
					console.log(222)
					document.onmousemove = function(e){
						var e = e|| window.event
						This.onmove(e);
					}
					document.onmouseup = function(e){
						This.onup();
					}
				},
				onmove:function(e){
					console.log(233)
					this.moveX = e.clientX;
					this.moveY = e.clientY;
					this.oBox.style.left = this.moveX-this.intX + "px";
					this.oBox.style.top = this.moveY-this.intY + "px";
				},
				onup: function(){
					document.onmousemove = null;
					document.onmousedown = null;
				}
			}
			new Drag('box')
		</script>
	</body>
</html>
